
<div style="POSITION: relative" id="content">
  <h3>jquery easyui使用虚拟滚动视图显示数百万行数据</h3>
  <div id="article_content" class="article_content">
    <p>datagrid的虚拟滚动特性可以运用为显示大数量的记录而不需要分页,当滚动垂直滚动条,datagrid执行ajax请求去加载和刷新现有的记录.</p>
    <p>整个刷新的行为过程是平稳的没有闪烁,在此教程中我们将创建一个datagrid和运用虚拟滚动特性从服务器加载数据.<br />
    </p>
    <p><span style="font-family: Arial, Helvetica, 'Nimbus Sans L', sans-serif; font-size: 14px; "><img src="documentation/images/1348563706_7644.png" alt="" /><br />
      </span></p>

    <h4 style="font-size: 16px; color: rgb(204, 0, 0); margin: 10px 0px; font-family: Arial, Helvetica, 'Nimbus Sans L', sans-serif; ">Create DataGrid</h4>
    部.
    <p>为datagrid运用虚拟滚动特性,'view' 属性应该设置为 'scrollview',用户应该从datagrid扩展下载scrollview 和引入scrollview 文件在页面的头
    <pre name="code" class="javascript">&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.jeasyui.com/easyui/datagrid-scrollview.js&quot;&gt;&lt;/script&gt;  </pre>
    <pre name="code" class="javascript">&lt;table id=&quot;tt&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:700px;height:300px&quot;  
        title=&quot;DataGrid - VirtualScrollView&quot;  
        data-options=&quot;view:scrollview,rownumbers:true,singleSelect:true,  
            url:'datagrid27_getdata.php',autoRowHeight:false,pageSize:50&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;inv&quot; width=&quot;80&quot;&gt;Inv No&lt;/th&gt;  
            &lt;th field=&quot;date&quot; width=&quot;100&quot;&gt;Date&lt;/th&gt;  
            &lt;th field=&quot;name&quot; width=&quot;80&quot;&gt;Name&lt;/th&gt;  
            &lt;th field=&quot;amount&quot; width=&quot;80&quot; align=&quot;right&quot;&gt;Amount&lt;/th&gt;  
            &lt;th field=&quot;price&quot; width=&quot;80&quot; align=&quot;right&quot;&gt;Price&lt;/th&gt;  
            &lt;th field=&quot;cost&quot; width=&quot;100&quot; align=&quot;right&quot;&gt;Cost&lt;/th&gt;  
            &lt;th field=&quot;note&quot; width=&quot;110&quot;&gt;Note&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
    注意:这里我们不需要使用pagination 属性,但pageSize 属性是必须的,你懂的,这样这行ajax请求时datagrid将从服务器获取指定记录数。</p>
    <h4 style="font-size: 16px; color: rgb(204, 0, 0); margin: 10px 0px; font-family: Arial, Helvetica, 'Nimbus Sans L', sans-serif; ">服务器端代码</h4>
    <p>datagrid27_getdata.php</p>
    
    <pre name="code" class="javascript">$page = isset($_POST['page']) ? intval($_POST['page']) : 1;  
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 50;  
  
$items = array();  
date_default_timezone_set('UTC');  
for($i=1; $i&lt;=$rows; $i++){  
    $index = $i+($page-1)*$rows;  
    $amount = rand(50,100);  
    $price = rand(10000,20000)/100;  
    $items[] = array(  
        'inv' =&gt; sprintf(&quot;INV%04d&quot;,$index),  
        'date' =&gt; date('Y-m-d',time()+24*3600*$i),  
        'name' =&gt; 'Name' . $index,  
        'note' =&gt; 'Note' . $index,  
        'amount' =&gt; $amount,  
        'price' =&gt; sprintf('%01.2f',$price),  
        'cost' =&gt; sprintf('%01.2f',$amount*$price)  
    );  
}  
$result = array();  
$result['total'] = 8000;  
$result['rows'] = $items;  
echo json_encode($result);  </pre>

    <h4 style="font-size: 16px; color: rgb(204, 0, 0); margin: 10px 0px; font-family: Arial, Helvetica, 'Nimbus Sans L', sans-serif; ">下载示例代码:</h4>
    <div style="font-size: 14px; font-family: Arial, Helvetica, 'Nimbus Sans L', sans-serif; padding-left: 50px; "><a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid27-demo.zip" target="_blank" class="download-link" style="color: rgb(0, 0, 255); ">easyui-datagrid-demo.zip</a></div>
    <br />
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>